@import '../utils/mixin.scss';

.sp-user {
	position: relative;
	height: 974rpx;
	background: linear-gradient(180deg, #7860FE 0%, rgba(212,216,253,0) 100%);
	
	&:after {
		content: '';
		position: absolute;
		top: 86rpx;
		left: 0;
		width: 277rpx;
		height: 380rpx;
		background: #D4D9FE;
		opacity: .2;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 200rpx;
	}
	
	&__ {
		
		&title,
		&desc,
		&form {
			z-index: 2;
		}
		
		&title,
		&desc {
			position: absolute;
			left: 82rpx;
			color: #fff;
		}
		
		&title {
			top: 194rpx;
			font-size: 64rpx;
			line-height: 90rpx;
		}
		
		&desc {
			top: 300rpx;
			font-size: 32rpx;
			line-height: 44rpx;
		}
		
		&pics {
			@include absolute(202rpx, 38rpx, null, null, 3);
			@include size(314rpx, 288rpx);
			
			image {
				display: block;
				@include size(100%, 100%);
			}
		}
		
		&form {
			@include absolute(388rpx, null, null, 30rpx)
			@include size(690rpx, 721rpx, 30rpx);
			border: 1rpx solid #fff;
			overflow: hidden;
			background: rgba(255, 255, 255, .4);
			
			&- {
				
				&title {
					position: relative;
					@include size(50%, 100rpx);
					@include font(32rpx, 100rpx, #333, left);
					padding-left: 50rpx;
					border-top-right-radius: 20rpx;
					background: #fff;
					box-sizing: border-box;
					
					&:after {
						content: '';
						@include size(30rpx, 30rpx);
						@include absolute(null, -30rpx, 0, null);
						line-height: 30rpx;
						background-image: radial-gradient(50rpx at 30rpx 0px, rgba(255, 255, 255, 0) 30rpx, #fff 30rpx);
					}
				}
				
				&content {
					background: #fff;
					height: 619rpx;
					padding: 8rpx 50rpx 0;
				}
				
				&item {
					margin-top: 36rpx;
				}
				
				&label {
					@include flex(center, null);
					
					image,
					text {
						display: block;
					}
					
					image {
						@include size(34rpx, 34rpx);
						margin-right: 8rpx;
					}
					
					text {
						@include font(32rpx, 44rpx, #333, left);
					}
				}
				
				&control {
					position: relative;
					padding-top: 16px;
					
					input {
						display: block;
						@include size(100%, 80rpx, 40rpx);
						background: #F1F8FE;
						padding: 0 42rpx;
						box-sizing: border-box;
					}
				}
				
				&password {
					@include size(34rpx, 34rpx);
					@include absolute(null, 54rpx, 22rpx, null);
					
					&.pass {
						@include background('@/static/images/user/icon-o.png', center, no-repeat, 34rpx 24rpx);
					}
					
					&.text {
						@include background('@/static/images/user/icon-n.png', center, no-repeat, 34rpx 18rpx);
					}
				}
				
				&submit {
					@include size(100%, 96rpx, 50rpx);
					background: #7860FE;
					margin: 80rpx auto 0;
					@include font(36rpx, 96rpx, #fff);
				}
			}
		}
	}
}